<template>
    <div class="center-box mar-top mar-bottom dl-row-sb start">
        <div class="left main-box" style="width: 1000px" v-loading="examLoading">
<!--            <div class="ed-title dl-row-sb">
                <el-button type="success" round style="width: 150px"
                           v-if="userCheckInfo.checkUserRecord!=null && userCheckInfo.checkUserRecord.isFinish!==1"
                           @click="commitConfirm()">提交
                </el-button>
                <el-button type="danger" round style="width: 150px"
                           v-if="userCheckInfo.checkUserRecord!=null && userCheckInfo.checkUserRecord.isFinish===1"
                           @click="scoreShow=true">查看结果
                </el-button>
            </div> -->
            <div class="subject-box" v-if="userCheckInfo.singleList.length>0">
                <h3>一、单选题</h3>
                <div class="border-main mar-bottom-20 sb-main-box"
                     v-for="(question,index) in userCheckInfo.singleList"
                     :key="index">

                  <div class="dl-row-sb mar-bottom-15">
                    <div class="dl-row center answer">
                      <h2 :id="'single'+question.questionNum">
                        {{question.questionNum}}、{{question.questionDesc}}</h2>
                    </div>
                    <!-- <div>
                      <i class="el-icon-star-on down-star" v-if="question.collect"
                         @click="cancelCollection(question)"></i>
                      <i class="el-icon-star-off up-star" v-else @click="collectionTitle(question)"></i>
                    </div> -->
                  </div>

                    <el-collapse accordion class="mar-bottom-15 right-answer"
                                 v-show="userCheckInfo.checkUserRecord!=null && userCheckInfo.checkUserRecord.isFinish===1">
                        <el-collapse-item name="1">
                            <template slot="title">
                                <p class="title">正确答案</p>
                            </template>
                            <div v-for="(right,rightIndex) in getRight(question.optList)" :key="rightIndex">
                              <div class="answer dl-row">
                                <span class="face"></span><p>{{right.orderNum}}、{{right.answerDesc}}</p>
                              </div>
<!--                                <el-checkbox v-model="rightChecked" disabled>{{right.answerDesc}}</el-checkbox>-->
                            </div>
                        </el-collapse-item>
                    </el-collapse>


                    <div class="em-subject">
                        <template>
                            <div class="item" v-for="(option,optionIndex) in question.optList"
                                 :key="optionIndex">
                                <el-radio-group v-model="question.checked">
                                    <el-radio :label="option.id" :disabled="view">{{option.orderNum}}、{{option.answerDesc}}</el-radio>
                                </el-radio-group>
                            </div>
                        </template>
                    </div>
					<div class="answerKeyCss" v-show="userCheckInfo.checkUserRecord!=null && userCheckInfo.checkUserRecord.isFinish===1">
						<span style="margin: 10px;">试题解析：{{question.answerKey}}</span>
					</div>
                </div>
            </div>
            <div class="subject-box" v-if="userCheckInfo.multipleList.length>0">
                <h3>二、多选题</h3>
                <div class="border-main mar-bottom-20 sb-main-box"
                     v-for="(question,index) in userCheckInfo.multipleList" :key="index">
                  <div class="dl-row-sb mar-bottom-15">
                    <div class="dl-row center answer">
                      <h2 :id="'multiple'+question.questionNum">
                        {{question.questionNum}}、{{question.questionDesc}}</h2>
                    </div>
                    <!-- <div>
                      <i class="el-icon-star-on down-star" v-if="question.collect"
                         @click="cancelCollection(question)"></i>
                      <i class="el-icon-star-off up-star" v-else @click="collectionTitle(question)"></i>
                    </div> -->
                  </div>

                    <el-collapse accordion class="mar-bottom-15 right-answer"
                                 v-show="userCheckInfo.checkUserRecord!=null && userCheckInfo.checkUserRecord.isFinish===1">
                        <el-collapse-item name="1">
                            <template slot="title">
                                <p class="title">正确答案</p>
                            </template>
                            <div v-for="(right,rightIndex) in getRight(question.optList)" :key="rightIndex">
                              <div class="answer dl-row">
                                <span class="face"></span><p>{{right.orderNum}}、{{right.answerDesc}}</p>
                              </div>
<!--                                <el-checkbox v-model="rightChecked" disabled>{{right.answerDesc}}</el-checkbox>-->
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                    <div class="em-subject">
                        <template>
                            <el-checkbox-group v-model="question.checkedList">
                                <el-checkbox v-for="(option,optionIndex) in question.optList" :key="optionIndex"
                                             :label="option.id" :disabled="view">{{option.orderNum}}、{{option.answerDesc}}
                                </el-checkbox>
                            </el-checkbox-group>
                        </template>
                    </div>
					<div class="answerKeyCss" v-show="userCheckInfo.checkUserRecord!=null && userCheckInfo.checkUserRecord.isFinish===1">
						<span style="margin: 10px;">试题解析：{{question.answerKey}}</span>
					</div>
                </div>
            </div>
            <div class="subject-box" v-if="userCheckInfo.judgeList.length>0">
                <h3>三、判断题</h3>
                <div class="border-main mar-bottom-20 sb-main-box"
                     v-for="(question,index) in userCheckInfo.judgeList"
                     :key="index">

                  <div class="dl-row-sb mar-bottom-15">
                    <div class="dl-row center answer">
                      <h2 :id="'judge'+question.questionNum">
                        {{question.questionNum}}、{{question.questionDesc}}
						<span style="color: #0068B6;" v-if="question.questionImg" @click="showImage(question.questionImg)"> 
							<el-link type="primary">查看图片</el-link>
						</span>
						</h2>
						
                    </div>
                    <!-- <div>
                      <i class="el-icon-star-on down-star" v-if="question.collect"
                         @click="cancelCollection(question)"></i>
                      <i class="el-icon-star-off up-star" v-else @click="collectionTitle(question)"></i>
                    </div> -->
                  </div>
                    <el-collapse accordion class="mar-bottom-15 right-answer"
							v-show="userCheckInfo.checkUserRecord!=null && userCheckInfo.checkUserRecord.isFinish===1">
                        <el-collapse-item name="1">
                            <template slot="title">
                                <p class="title">正确答案</p>
                            </template>
                            <div v-for="(right,rightIndex) in getRight(question.optList)" :key="rightIndex">
                              <div class="answer dl-row">
                                <span class="face"></span><p>{{right.orderNum}}、{{right.answerDesc}}</p>
                              </div>
<!--                                <el-checkbox v-model="rightChecked" disabled>{{right.answerDesc}}</el-checkbox>-->
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                    <div class="em-subject">
                        <template>
                            <div class="item" v-for="(option,optionIndex) in question.optList"
                                 :key="optionIndex">
                                <el-radio-group v-model="question.checked">
                                    <el-radio :label="option.id" :disabled="view">{{option.orderNum}}、{{option.answerDesc}}</el-radio>
                                </el-radio-group>
                            </div>
                        </template>
                    </div>
					<div class="answerKeyCss" v-show="userCheckInfo.checkUserRecord!=null && userCheckInfo.checkUserRecord.isFinish===1">
						<span style="margin: 10px;">试题解析：{{question.answerKey}}</span>
					</div>
                </div>
            </div>
        </div>

        <div class="right main-box dl-sticky" style="width: 340px;">
            <div class="ed-title dl-row center">
                <div class="left dl-row center">
                    <h1>答题卡</h1>
                </div>
                <div>
                    <ul class="aq-tag dl-row">
                        <li class="blue dl-row center" v-if="!view"><i></i>
                            <p>已答</p></li>
                        <li class="gray dl-row center" v-if="!view"><i></i>
                            <p>未答</p></li>
                        <li class="right dl-row center" v-if="view"><i></i>
                            <p>正确</p></li>
                        <li class="red dl-row center" v-if="view"><i></i>
                            <p>错误</p></li>
                    </ul>
                </div>
            </div>
            <div class="border-main ac-state mar-bottom-20" v-if="userCheckInfo.singleList.length>0">
                <h1>单选题</h1>
                <ul class="dl-row">
                    <li v-for="(question,index) in userCheckInfo.singleList" :key="index"
                        :class="getAnswerCls(question)"
                        @click="goAnchorPoint('single'+question.questionNum)">{{question.questionNum}}
                    </li>
                </ul>
            </div>
            <div class="border-main ac-state mar-bottom-20" v-if="userCheckInfo.multipleList.length>0">
                <h1>多选题</h1>
                <ul class="dl-row">
                    <li v-for="(question,index) in userCheckInfo.multipleList" :key="index"
                        :class="getAnswerCls(question)"
                        @click="goAnchorPoint('multiple'+question.questionNum)">{{question.questionNum}}
                    </li>
                </ul>
            </div>
            <div class="border-main ac-state" v-if="userCheckInfo.judgeList.length>0">
                <h1>判断题</h1>
                <ul class="dl-row">
                    <li v-for="(question,index) in userCheckInfo.judgeList" :key="index"
                        :class="getAnswerCls(question)"
                        @click="goAnchorPoint('judge'+question.questionNum)">{{question.questionNum}}
                    </li>
                </ul>
            </div>
			<div class="ed-title" style="padding-top: 20px;text-align: center;">
			    <el-button type="success" round style="width: 150px"
			               v-if="userCheckInfo.checkUserRecord!=null && userCheckInfo.checkUserRecord.isFinish!==1"
			               @click="commitConfirm()">提交
			    </el-button>
			    <el-button type="danger" round style="width: 90px"
			               v-if="userCheckInfo.checkUserRecord!=null && userCheckInfo.checkUserRecord.isFinish===1"
			               @click="scoreShow=true">查看
			    </el-button>
				<el-button type="success" round style="width: 90px"
				           v-if="userCheckInfo.checkUserRecord!=null && userCheckInfo.checkUserRecord.isFinish===1"
				           @click="goBack">返回
				</el-button>
			</div>
        </div>
        <el-dialog title="考试结果" :visible.sync="scoreShow" :before-close="viewResult">
            <div class="statistics-box dl-row-sa center">
                <div class="item dl-column center">
                    <div class="dl-row end">
                        <h1>{{result.rightCount}}</h1>
                        <span>题</span>
                    </div>
                    <p>答对题数</p>
                </div>
                <div class="item dl-column center">
                    <div class="dl-row end">
                        <h1>{{result.wrongCount}}</h1>
                        <span>题</span>
                    </div>
                    <p>答错题数</p>
                </div>
                <div class="item dl-column center">
                    <div class="dl-row end">
                        <h1>{{result.source}}</h1>
                        <span>分</span>
                    </div>
                    <p>得分</p>
                </div>
            </div>
        </el-dialog>
		<image-from ref="igFrom"> </image-from>
    </div>
</template>


<script>
    import {workbook, commitPractice} from '@/api/practice'
    import {createCollect, cancelCollect} from '@/api/collect'
	import imageFrom from './imageForm.vue'
    export default {
		components:{ imageFrom},
        data() {
            return {
                commit: false,
                examLoading: true,
                autoCommit: false,
                rightChecked: true,
                view: false,
                practiceId: this.$route.query.practiceId,
                checkList: ['', ''],
                userCheckInfo: {
                    check: null,
                    singleList: [],
                    multipleList: [],
                    judgeList: [],
                },
                scoreShow: false,
                checkRecord: {
                    practiceId: this.$route.query.practiceId,
                    userAnswerList: [],
                    queList: []
                },
                result: {
                    rightCount: 0,
                    wrongCount: 0,
                    source: 0
                },
            };
        },
        created() {
            this.$nextTick(() => {
                this.findExamInfo()
            })
        },
        beforeRouteLeave(to, from, next) {
			window.onbeforeunload=null;
            if (this.commit) {
                next();
                return;
            }
            this.$confirm('离开当前页面数据自动提交，确定要离开？', '提示', {type: 'warning'})
                .then(() => {
                    this.autoCommit = true
                    this.commitExam()
                    next();
                })
                .catch(() => {
                    next(false);
                });
        },
		beforeDestroy() {
			window.onbeforeunload=null;
		},
        methods: {
			creatLisenter(){
				if(!this.commit){
					let that = this
					window.onbeforeunload = e => {
						if(that.$route.fullPath.indexOf("bank/practiceDetails")>0){
							this.commitExam()
							e = e || window.event
							// 兼容IE8和Firefox 4之前的版本
							if (e) {
							  e.returnValue = '关闭提示'
							}
							// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
							return '关闭提示'
						}else{
							window.onbeforeunload = null
						}	    
					}
				}
				
			},
            getRight(optionList) {
                return optionList.filter(item => item.isTrue === 1)
            },
            findExamInfo() {
                const params = {
                    bankId: this.$route.params.bankList,
					keyWords: this.$route.params.keyWords,
					checkType: this.$route.params.checkType,
                    practiceId: this.practiceId,
                    singleNum: this.$route.params.singleNum,
                    multipleNum: this.$route.params.multipleNum,
                    judgeNum: this.$route.params.judgeNum,
                }
                workbook(params).then(data => {
                    this.userCheckInfo = data
                    this.examLoading = false
                    this.practiceId = data.practiceId
                    this.result = data.checkUserRecord
                    if (data.checkUserRecord != null && data.checkUserRecord.isFinish === 1) {
                        this.view = true
                        this.commit = true
                    }
					this.creatLisenter()
                    this.checkRecord.practiceId = this.practiceId
                    this.$router.push({query: {...this.$route.query, practiceId: data.practiceId}})
                })
            },
            getAnswerCls(question) {
                if (this.view) {
                    if (question.isRight !== 1) {
                        return 'red'
                    }
                    return 'right'
                }
                if (question.checked) {
                    return 'blue'
                }
                if (question.checkedList.length > 0) {
                    return 'blue'
                }
                return 'gray'
            },
            goAnchorPoint(event) {
                const id = "#" + event;
                document.querySelector(id).scrollIntoView({
                    behavior: "smooth",
                    block: "center",
                    inline: "nearest",
                });
            },
            commitConfirm() {
                this.$confirm('提交后不可更改，确定提交？', '提示', {type: 'warning'})
                    .then(() => {
                        this.commitExam()
                    })
            },
			goBack(){
				this.$router.push({path:'/home'})
			},
            commitExam() {
				this.examLoading = true
                this.commit = true
                this.checkRecord.queList = []
                this.checkRecord.userAnswerList = []
                this.checkRecord.queList.push(...this.userCheckInfo.singleList)
                this.checkRecord.queList.push(...this.userCheckInfo.multipleList)
                this.checkRecord.queList.push(...this.userCheckInfo.judgeList)
                this.checkRecord.queList.forEach(item => {
                    item.questionId = item.id
                    if (item.checked != null) {
                        item.optionId = item.checked
                        item.isAnswer = 1;
                    } else if (item.checkedList != null && item.checkedList.length > 0) {
                        item.optionId = item.checkedList.join()
                        item.isAnswer = 1;
                    } else {
                        item.isAnswer = 0
                    }
                    this.checkRecord.userAnswerList.push(item)
                })
                commitPractice(this.checkRecord).then(data => {
					debugger
					this.examLoading = false
                    if (!this.autoCommit) {
                        this.viewResult()
                    }
                }).catch(() => {
                    this.examLoading = false
                });
            },
            viewResult() {
                this.scoreShow = false
                this.findExamInfo()
            },
            collectionTitle(question) {
                const data = {
                    busId: question.id,
                    name: question.questionDesc,
                    type: 3
                }
                createCollect(data).then(res => {
                    question.collect = true
                    this.$message.success(`收藏习题成功！`)
                })
            },
            cancelCollection(question) {
                question.collect = false
                cancelCollect(question.id).then(res => {
                    this.$message.success(`已取消收藏！`)
                })
            },
			showImage(obj){
				var array=eval('(' + obj + ')');
				var imageUrl="";
				if(Object.prototype.toString.call(array)==='[object Array]'){
					imageUrl=array[0].url;
				}
				this.$refs.igFrom.dialog=true;
				this.$refs.igFrom.imageUrl=imageUrl;
			}
        }

    }
</script>

<style lang="scss" scoped>
	.answerKeyCss{
		lign-items: center;
		display: flex;
		lex-direction: row;
		justify-content: space-between;
		width: 100%;
		min-height: 80px;
		border: 1px #e0e0e0 solid;border-radius: 5px;
		background-color: #f8fcff;
	}
	.imageCss{
		lign-items: center;
		display: flex;
		lex-direction: row;
		justify-content: space-between;
		width: 100%;
		min-height: 20px;
		border: 1px #e0e0e0 solid;border-radius: 5px;
		background-color: #f8fcff;
	}
    .title {
        font-size: 15px;
        font-weight: bold;
        color: #2868B0;
    }

    .ed-title {
        margin-bottom: 20px;

        .left {
            h1 {
                font-size: 22px;
                font-weight: bold;
                color: #1A1A1A;
                margin-right: 15px;
            }

            p {
                font-size: 16px;
                color: #F45333;
            }
        }
    }

    .subject-box {
        h3 {
            font-size: 16px;
            color: #000000;
            margin-bottom: 15px;
        }

    }

    .up-star {
        font-size: 22px;
        color: #999;
    }

    .up-star:hover {
        color: #0068B6;
    }

    .down-star {
        font-size: 22px;
        color: #0068B6;
    }

</style>

<style>
	.el-dialog__body {
		padding: 15px 25px 25px 25px;
	}
</style>



























